<template>
    <div class="login">
        <!-- <div class="middle-wrapper">
            <div class="system_top w1200">
                <div class="text">
                    <h3>新华三技术大讲堂</h3>
                    <p>Enterprise Data Service Solutions</p>
                </div>
                <div class="login-form">
                    <el-form ref="loginForm" :model="form">
                        <el-form-item prop="username">
                            <el-input v-model.number="form.username" placeholder="请输入用户名称" class="el-inputlist"
                                style="height: 60px;">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input :type="passwordType" v-model="form.password" placeholder="请输入登录密码"
                                class="el-inputlist" @keyup.enter.native="login(form)" autocomplete="new-password">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-col :offset="3">
                                <el-form-item>
                                    <el-button class="login-btn" @click="login"></el-button>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="codelogin">
                    <a @click="/forgetPsd">忘记密码</a>
                    <a @click="/codeLogin" style="margin-left: 20px;">验证码登录</a>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
    import axios from 'axios';
    import crypto from 'crypto';
    export default {
        data() {
            return {
                passwordType: 'password',
                checkCode: '',
                form: {
                    username: 'admin',
                    password: '',
                    yanzhengma: ''
                }
            };
        },
        methods: {
            login() {

                //				const md5 = crypto.createHash('md5');
                //		        md5.update(this.form.password);
                //		        let md5password = md5.digest('hex');
                //				this.$ajax({
                //				 	url: this.$root.jifuUrl + "/mns/user/login",
                //				 	headers:{'ContentType': 'application/json; charset=utf-8'},
                //				 	method: 'POST',
                //				 	data: {
                //					 	nickname:this.form.username,
                //					 	password:this.form.password
                //					},
                //				 	success: res=> {
                //				 		if(res.data.code == 200) {
                //				 			this.$root.userInfoMsg = res.data.data;
                //                            this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
                //							this.$router.push({ path: 'home' });
                //				 		}
                //					}
                //				});

                axios({
                    method: 'POST',
                    url: this.$root.jifuUrl + "/mns/user/login",
                    headers: {
                        'Content-type': 'application/json; charset=utf-8'
                    },
                    data: JSON.stringify({
                        nickname: this.form.username,
                        password: this.form.password
                    })
                }).then((res) => {
                    this.$root.userInfoMsg = res.data.data;
                    this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
                    this.$router.push({
                        path: 'home'
                    });
                }).catch(error => {
                    alert('用户名或密码错误！');
                })
            }
        }
    };
</script>
<style>
    .codelogin {
        display: flex;
        /* width: 120px; */
        height: 30px;
        line-height: 30px;
        /* text-align: center; */
        margin-left: 50%;
        color: whitesmoke !important;
        /* background-color: burlywood; */
    }
    
    .login {
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: url(../../assets/qudaoImg/HomeBg.jpg) top center no-repeat;
        background-size: 100% 100%;
    }
    
    .login .middle-wrapper {
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-60%);
        height: 350px;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .login .title-wrapper {
        margin-top: 50px;
        margin-bottom: 30px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
    }
    
    .login .system_top {
        height: 400px;
        overflow: hidden;
    }
    
    .login .system_top .text {
        width: 886px;
        height: 80px;
        background: url(../../assets/qudaoImg/keji.png) 0 0 no-repeat;
        margin: 60px auto 0;
    }
    
    .login .system_top .text h3 {
        height: 50px;
        line-height: 50px;
        font-size: 50px;
        color: #F5F5F5;
        font-weight: normal;
        margin: 0 0 24px 137px;
    }
    
    .login .system_top .text p {
        height: 43px;
        line-height: 43px;
        font-size: 40px;
        color: #F5F5F5;
        margin: 0 0 38px 137px;
    }
    
    .login .login-form .el-form,
    .login-form {
        width: 886px;
        height: 80px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    
    .login .login-form .el-form-item {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .login .login-form .el-form-item:nth-child(2) {
        left: 435px;
    }
    
    .login .login-form .el-form-item:nth-child(3) {
        left: 820px;
    }
    
    .login .login-form .el-form-item,
    .login .login-form .el-form-item .el-inputlist,
    .login .login-form .el-form-item__content {
        width: 275px;
        height: 60px !important;
        line-height: 60px;
        display: inline-block;
    }
    
    .login .login-form .el-form-item .el-inputlist input {
        width: 275px;
        height: 60px !important;
        line-height: 60px;
        display: inline-block;
        font-size: 18px;
    }
    
    .login-form .el-form-item input[type="text"],
    .login-form .el-form-item input[type="password"] {
        width: 360px !important;
        height: 60px;
        line-height: 60px;
        padding-left: 85px !important;
    }
    
    .login .el-form-item .el-button {
        padding: 0;
        width: 60px;
        height: 60px;
        display: inline-block;
        border: none;
        cursor: pointer;
        background: url(../../assets/qudaoImg/Go.png) top center no-repeat;
    }
    
    .login .el-form-item:nth-child(1) input {
        background: url(../../assets/qudaoImg/icon01.png) #fff 30px center no-repeat;
    }
    
    .login .el-form-item:nth-child(2) input {
        background: url(../../assets/qudaoImg/icon02.png) #fff 30px center no-repeat;
    }
    
    .login-form .el-form-item__error {
        font-size: 14px;
        margin-top: 5px;
    }
</style>